<template>
  <div class="app-container">
    <div class="custom_card_0" v-show="showSearch">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="所属品牌" prop="carBrandId">
          <el-select
            v-model="queryParams.carBrandId"
            placeholder="请选择所属品牌"
            clearable
            size="small"
            @change="getSeriesList"
            filterable
            remote
          >
            <el-option
              v-for="(item, i) in brandList"
              :key="item.brandId"
              :label="item.brandName"
              :value="item.brandId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所属车系" prop="carSeriesId">
          <el-select
            v-model="queryParams.carSeriesId"
            placeholder="请选择所属车系"
            clearable
            size="small"
            filterable
            remote
          >
            <el-option
              v-for="(item, i) in seriesList"
              :key="item.seriesId"
              :label="item.seriesName"
              :value="item.seriesId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车型名称" prop="modelName">
          <el-input
            v-model="queryParams.modelName"
            placeholder="请输入车型名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="座位数" prop="seating">
          <el-select
            v-model="queryParams.seating"
            placeholder="请选择座位数"
            clearable
            size="small"
            filterable
            remote
          >
            <el-option
              v-for="dict in dict.type.seat"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="车辆类型" prop="styleModel">
          <el-select
            v-model="queryParams.styleModel"
            placeholder="请选择车辆类型"
            clearable
            size="small"
            filterable
            remote
          >
            <el-option
              v-for="dict in dict.type.style_model"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="变速箱" prop="speedChangingBox">
          <el-select
            v-model="queryParams.speedChangingBox"
            placeholder="请选择变速箱"
            clearable
            size="small"
            filterable
            remote
          >
            <el-option
              v-for="dict in dict.type.speed_changing_box"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="排量" prop="displacement">
          <el-select
            v-model="queryParams.displacement"
            placeholder="请选择排量"
            clearable
            size="small"
            filterable
            remote
          >
            <el-option
              v-for="dict in dict.type.displacement"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="燃油类型" prop="fuelType">
          <el-select
            v-model="queryParams.fuelType"
            placeholder="请选择燃油类型"
            clearable
            size="small"
            filterable
            remote
          >
            <el-option
              v-for="dict in dict.type.fuel_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="custom_card">
      <el-row :gutter="10" class="mb10">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['car:model:add']"
            >新增</el-button
          >
        </el-col>
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>

      <el-row :gutter="10" class="mb10" style="margin: 0">
        <div class="grid-content bg-purple-light">
          <el-tabs
            v-model="tabsDefaultSelect"
            type="card"
            @tab-click="tabsClick"
          >
            <el-tab-pane label="全部" name="1"></el-tab-pane>
            <el-tab-pane label="已开启" name="2"></el-tab-pane>
            <el-tab-pane label="已关闭" name="3"></el-tab-pane>
          </el-tabs>
        </div>
      </el-row>

      <el-table
        v-loading="loading"
        :data="modelList"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column
          label="所属品牌"
          align="center"
          prop="carBrandName"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          label="所属车系"
          align="center"
          prop="carSeriesName"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          label="车型名称"
          align="center"
          prop="modelName"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          label="座位数"
          align="center"
          prop="seating"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.seat" :value="scope.row.seating" />
          </template>
        </el-table-column>
        <el-table-column
          label="车辆类型"
          align="center"
          prop="styleModel"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.style_model"
              :value="scope.row.styleModel"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="变速箱"
          align="center"
          prop="speedChangingBox"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.speed_changing_box"
              :value="scope.row.speedChangingBox"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="排量"
          align="center"
          prop="displacement"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.displacement"
              :value="scope.row.displacement"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="燃油类型"
          align="center"
          prop="fuelType"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.fuel_type"
              :value="scope.row.fuelType"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="是否启用"
          align="center"
          prop="isAvailable"
          min-width="80"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <!-- {{scope.row.isAvailable==0?'关闭':'开启'}} -->
            <dict-tag
              :options="dict.type.sys_available"
              :value="scope.row.isAvailable"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          fixed="left"
          width="150"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.isAvailable === 0"
              size="mini"
              type="text"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['car:model:edit']"
              >修改</el-button
            >
            <el-button
              v-if="scope.row.isAvailable === 0"
              size="mini"
              type="text"
              @click="handleAvailable(scope.row)"
              v-hasPermi="['car:model:edit']"
              >开启</el-button
            >
            <el-button
              v-if="scope.row.isAvailable === 1"
              size="mini"
              type="text"
              @click="handleAvailable(scope.row)"
              v-hasPermi="['car:model:edit']"
              >关闭</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <modelsave ref="modelsave" @close="getList"></modelsave>
    </div>
  </div>
</template>

<script>
import {
  listModel,
  delModel,
  exportModel,
  getCarBrandList,
  getCarSeriesList,
  availableModel,
} from '@/api/car/model'
import Modelsave from '@/views/car/model/modelsave'

export default {
  name: 'Model',
  components: { Modelsave },
  dicts: [
    'style_model',
    'speed_changing_box',
    'displacement',
    'fuel_type',
    'sys_available',
    'seat',
  ],
  data() {
    return {
      tabsDefaultSelect: '1',
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 车型表格数据
      modelList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      brandList: [],
      seriesList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        carBrandId: null,
        carSeriesId: null,
        modelName: null,
        seating: null,
        styleModel: null,
        speedChangingBox: null,
        displacement: null,
        fuelType: null,
        isAvailable: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
    }
  },
  created() {
    getCarBrandList().then((response) => {
      this.brandList = response.data
    })
    this.getList()
  },
  methods: {
    // 获取车系
    getSeriesList(carBrandId) {
      this.queryParams.carSeriesId = null
      getCarSeriesList(carBrandId).then((response) => {
        this.seriesList = response.data
      })
    },
    /** 查询车型列表 */
    getList() {
      this.loading = true
      listModel(this.queryParams).then((response) => {
        this.modelList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    tabsClick(tab, event) {
      //默认查询全部
      var params = {}
      if (tab.index == 1) {
        //查询启用的列表数据
        params = { isAvailable: 1 }
      } else if (tab.index == 2) {
        //查询停用的列表数据
        params = { isAvailable: 0 }
      }
      this.queryParams.isAvailable = params.isAvailable
      this.getList()
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        carBrandId: null,
        carSeriesId: null,
        modelName: null,
        seating: null,
        styleModel: null,
        speedChangingBox: null,
        displacement: null,
        fuelType: null,
        delFlag: null,
        isAvailable: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        tenantId: null,
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$refs.modelsave.handleAdd()
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$refs.modelsave.handleUpdate(row)
    },
    /** 启停用按钮操作 */
    handleAvailable(row) {
      const id = row.id
      var tip = '停用'
      var isAvailable = 0

      if (row.isAvailable == 0) {
        tip = '启用'
        var isAvailable = 1
      }

      this.$modal
        .confirm('是否确认' + tip + '该车辆品牌【' + row.modelName + '】？')
        .then(function () {
          var data = {
            id: id,
            isAvailable: isAvailable,
          }
          return availableModel(data)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('操作成功')
        })
        .catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$modal
        .confirm('是否确认导出所有车型数据项？')
        .then(() => {
          this.exportLoading = true
          return exportModel(queryParams)
        })
        .then((response) => {
          this.$download.name(response.msg)
          this.exportLoading = false
        })
        .catch(() => {})
    },
  },
}
</script>
<style scoped>
::v-deep .el-tabs__header {
  margin-top: 4px;
}
</style>